<template>
  <div class="contentWrap">
    <div class="box">
      <van-row>
        <van-col span="8">
          <div class="title">
            设备名称
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{ detailInfo.equipmentName }} -->
            {{ detailInfo.alarmEqptSecondTypeName }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            设备状态
          </div>
        </van-col>
        <van-col span="16">
          <div class="content" :class="detailInfo.equipmentState | filterColor">
            <!-- {{ detailInfo.equipmentState | equipmentStateFilter }} -->
            {{ detailInfo.alarmLevelValue }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            设备地点
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{ detailInfo.building }} {{ detailInfo.floor }}
            {{ detailInfo.room }} -->
            {{ detailInfo.alarmPosition }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            设备责任人
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            <!-- {{ detailInfo.contacter }} -->
            张三 13800000000
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            上报时间
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            {{ detailInfo.reportTime }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            上报人员
          </div>
        </van-col>
        <van-col span="16">
          <div class="content">
            {{ userInfo.account }}
          </div>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="8">
          <div class="title">
            上报信息
          </div>
        </van-col>
        <van-col span="16">
          <div class="textArea">
            <field
              v-model="remark"
              rows="3"
              autosize
              label=""
              type="textarea"
              placeholder="请输入内容"
              maxlength="100"
              show-word-limit
            />
          </div>
        </van-col>
      </van-row>

      <!-- <van-row>
        <van-col span="8">
          <div class="title">
            照片上传
          </div>
        </van-col>
        <van-col span="16">
          <div class="upload">
            <uploader
              v-model="fileList"
              :after-read="afterRead"
              :before-delete="deleteFile"
              :max-count="3"
              accept="image/*"
            >
              <van-button type="primary">点击上传</van-button>
            </uploader>
          </div>
        </van-col>
      </van-row> -->

      <van-row class="btnWrap">
        <van-button type="primary" @click="onSubmit">提 交</van-button>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Col, Row, Field, Uploader, Button, Dialog, Toast } from "vant";
import {
  queryEquipmentByNumInMobile,
  upload,
  deleteFile,
  reportAlarmInMobile
} from "@/api/Report";
import { getUserInfo } from '@/api/user'
export default {
  name: "overview",
  components: {
    VanCol: Col,
    VanRow: Row,
    Field,
    Uploader,
    VanButton: Button
  },
  data() {
    return {
      uploadList: [],
      fileList: [],
      userInfo: {},
      remark: "",
      detailInfo: {}
    };
  },
  async mounted() {
    await getUserInfo(sessionStorage.getItem('token')).then(res => {
       if (res.code === 0) {
        this.userInfo.account = res.data.userName
       }
    })
    // this.userInfo = JSON.parse(sessionStorage.getItem("pcUserInfo"));
    this.queryEquipmentByNumInMobile();
  },
  filters: {
    equipmentStateFilter: function(v) {
      let result;
      switch (v) {
        case 0:
          result = "正常";
          break;
        case 1:
          result = "告警";
          break;
        case 2:
          result = "开启";
          break;
        case 3:
          result = "关闭";
          break;
        default:
          break;
      }
      return result;
    },
    filterColor(v) {
      let result;
      switch (v) {
        case 0:
          result = "green";
          break;
        case 1:
          result = "red";
          break;
        case 2:
          result = "green";
          break;
        case 3:
          result = "gray";
          break;
        default:
          break;
      }
      return result;
    }
  },
  methods: {
    deleteFile(file) {
      console.log("删除", file);
      Dialog.confirm({
        message: "确定要删除吗？",
        theme: "round-button"
      })
        .then(() => {
          Toast.success("删除成功");
          let deleteIndex = this.fileList.findIndex(
            item => item.file.name === file.file.name
          );
          this.fileList.splice(deleteIndex, 1);
          let deleteIndex2 = this.uploadList.findIndex(
            item => item.indexOf(file.file.name) > -1
          );
          this.uploadList.splice(deleteIndex2, 1);
          console.log(this.uploadList);
          return;
          deleteFile({ fileName: file.fileInfo }).then(res => {
            if (res.code === 0) {
              // Notify({ type: 'success', message: '删除成功' })
              Toast.success("删除成功");
              let deleteIndex = this.fileList.findIndex(
                item => item.file.name === file.file.name
              );
              this.fileList.splice(deleteIndex, 1);
              let deleteIndex2 = this.uploadList.findIndex(
                item => item.indexOf(file.file.name) > -1
              );
              this.uploadList.splice(deleteIndex2, 1);
              console.log(this.uploadList);
            }
          });
        })
        .catch(() => {});
    },
    async onSubmit() {
      if (!this.remark) {
        Toast.fail("处理信息不能为空");
        return;
      }
      Toast.success("提交成功");
      setTimeout(() => {
        this.$router.replace("/home/report");
      }, 1000);
      return;
      let res = await reportAlarmInMobile({
        equipmentNumber: this.$route.query.equipmentNumber,
        processRemark: this.remark,
        fileUrlList: this.uploadList,
        reportTime: this.detailInfo.reportTime
      });
      if (res.code === 0) {
        // Notify({ type: 'success', message: '提交成功' })
        Toast.success("提交成功");
        await this.$router.push("/home/report");
      } else {
        // Notify({ type: 'warning', message: res.msg })
        Toast.fail(res.msg);
      }
    },
    async queryEquipmentByNumInMobile() {
      let data = JSON.parse(this.$route.query.data);
      console.log(data, 'data')
      if (data.id) {
        this.detailInfo = data;
      }
      return;
      let res = await queryEquipmentByNumInMobile({
        equipmentNumber: this.$route.query.equipmentNumber
      });
      if (res.code === 0) {
        this.detailInfo = res.result;
      }
    },
    // 返回布尔值
    beforeRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        // Notify({ type: 'warning', message: '请上传jpg或png格式图片' })
        Toast.fail("请上传jpg或png格式图片");
        return false;
      }
      return true;
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      return;
      let params = new FormData();
      params.append("file", file.file);
      let res = await upload(params);
      if (res.code === 0) {
        this.uploadList.push(res.result);
        // Notify({ type: 'success', message: '上传成功' })
        Toast.success("上传成功");
        file.fileInfo = res.result;
        // console.log(this.uploadList)
      } else {
        this.fileList.splice(
          this.fileList.findIndex(item => item.file.name === file.file.name),
          1
        );
        // Notify({ type: 'warning', message: res.msg })
        Toast.fail(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contentWrap {
  width: 100%;
  height: 720px;
  box-sizing: border-box;
  padding: 25px 5%;
  .box {
    width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 2px 0px #cccccc;
    border-radius: 5px;
    padding: 20px 5%;
    box-sizing: border-box;
    .van-row {
      margin-bottom: 25px;
    }
    .title {
      font-size: 15px;
      font-family: PingFang SC Medium, PingFang SC Medium-Medium;
      font-weight: 500;
      color: #666666;
    }
    .content {
      font-size: 15px;
      font-family: PingFang SC Bold, PingFang SC Bold-Bold;
      font-weight: 700;
      color: #333333;
    }
    .red {
      color: #fc5a69;
    }
    .gray {
      color: #848584;
    }
    .green {
      color: #50e3c2;
    }
  }
}
.van-cell {
  box-sizing: border-box;
  width: 70%;
  padding: 0 0 0 5px;
  border: 2px solid #fc5a69;
  border-radius: 10px;
  /deep/ .van-field__right-icon {
    margin-right: 5px;
    color: #fc5a69;
  }
}
.textArea {
  .van-cell {
    box-sizing: border-box;
    width: 80%;
  }
  /deep/ .van-field__word-limit {
    padding-right: 5px;
  }
}
.upload {
  width: 100%;
  /deep/ .van-uploader {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
    }
    .van-button--normal {
      border: 2px solid #fc5a69;
      border-radius: 10px;
      color: #666666;
      background: transparent;
      width: 80%;
      height: 80px;
    }
  }
}
.btnWrap {
  text-align: center;
  .van-button--normal {
    width: 90%;
    background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
    box-shadow: 0px 1px 2px 0px #d93e3e;
    border: none;
    border-radius: 20px;
  }
}
</style>
